<div class="devtron">
  <div class="jumbotron text-center">
    <div class="container">
      <img class="mb-4 mb-lg-6" src="{{ static-asset 'image' '/devtron-icon.svg'}}" alt="Devtron icon">
      <p><img src="{{ static-asset 'image' '/devtron-logo.svg'}}" alt="Devtron logo"></p>
      <p class='jumbotron-lead'><span class='jumbotron-lead-muted'>An Electron DevTools Extension</span></p>
    </div>
  </div>

  <section class="page-section page-section-spacious">
    <div class="container-narrow">

      <h1 class="text-center-sm">Debug your app</h1>
      <p class="lead text-center-sm">
        Devtron is an <a href="https://github.com/electron/devtron">open source</a> tool to help you inspect, monitor,
        and debug your Electron app. Built on top of the amazing <a href="https://developer.chrome.com/devtools">Chrome Developer Tools</a>.
      </p>

      <div class='row mt-4 mt-sm-8'>
        <div class='col-xs-12 col-md-6 text-left mb-4'>
          <h2><span class="mega-octicon octicon-repo-forked pr-3"></span>Require Graph</h2>
          <p>Visualize your app's internal and external library dependencies in both the main and renderer processes.
            The require graph allows you to trace through the loading order and dependency graph of the JavaScript
            files in your app.
          </p>
        </div>
        <div class='col-xs-12 col-md-6'>
          <div class="app-frame">
            <img alt="Screenshot of Devtron Require Graph" src="{{ static-asset 'image' '/devtron-require-graph.png'}}">
          </div>
        </div>
      </div>

      <div class='row mt-8'>
        <div class='col-xs-12 col-md-6 mb-4'>
          <div class="app-frame">
            <img alt="Screenshot of Devtron Event Listeners" src="{{ static-asset 'image' '/devtron-event-listeners.png'}}">
          </div>
        </div>
        <div class='col-xs-12 col-md-6 text-left'>
          <h2><span class="mega-octicon octicon-radio-tower pr-3"></span>Event Listeners</h2>
          <p>Explore the events and listeners currently registered in your app
            on the core Electron APIs such as the window, the app, and the
            main and renderer processes. Search for listeners to make sure they
            are registered correctly and active.
          </p>
        </div>
      </div>

      <div class='row mt-8'>
        <div class='col-xs-12 col-md-6 text-left mb-4'>
          <h2><span class="mega-octicon octicon-search pr-3"></span>IPC Monitor</h2>
          <p>Track and inspect the messages sent and received between the processes in your app.
            The IPC monitor records and displays the message traffic between the main and renderer processes.
          </p>
        </div>
        <div class='col-xs-12 col-md-6'>
          <div class="app-frame">
            <img alt="Screenshot of Devtron IPC Monitor" src="{{ static-asset 'image' '/devtron-ipc.png'}}">
          </div>
        </div>
      </div>

      <div class='row mt-8'>
        <div class='col-xs-12 col-md-6 mb-4'>
          <div class="app-frame">
            <img alt="Screenshot of Devtron Linter" src="{{ static-asset 'image' '/devtron-linter.png'}}">
          </div>
        </div>
        <div class='col-xs-12 col-md-6 text-left'>
          <h2><span class="mega-octicon octicon-bug pr-3"></span>Linter</h2>
          <p>Check your app for possible issues and missing functionality. The linter
            provides guidance and code snippets for detected issues.
          </p>
        </div>
      </div>

    </div>
  </section>

  <section class='page-section page-section-spacious bg-shade' id='get-started'>
    <div class='container-narrow text-center'>
      <h1>Get started</h1>
      <figure class="highlight highlight-dark text-left my-4">
      <pre><code><span class="c1"># Install Devtron</span>
$ npm install --save-dev devtron

<span class="c1">// Run the following from the Console tab of your app's DevTools</span>
require(<span class="string">'devtron'</span>).install()
<span class="c1">// You should now see a Devtron tab added to the DevTools</span>
</code></pre>
      </figure>

      <h3>Or dive deeper and read the <a href='https://github.com/electron/devtron#devtron'>documentation</a>.</h3>
    </div>
  </section>
</div>
